<template>
<div class="sign-mod-CommonImgBox temp-upload-load-mod">
    <!-- 编辑模式 -->
    <div class="sign-mod-edit">

        <div class="upload-img-mod">
            <img class="temp-upload-img" :src="uploadUrl">
            <input type="file" class="upload-file hide-for-edit-cont" @change="uploadFile" />
        </div>
        
    </div>
    <!-- 预览模式 -->
    <div class="sign-mod-prev">
        <img class="temp-upload-img" :src="uploadUrl + tempData.fileId">
    </div>
</div>
</template>

<script>
export default {
    name: 'CommonImgBox',
    props: {
        // 列表数据
        tempData: {
            type: Object,
            default: function() {
                return {
                    title: '',
                    placeholder: '请输入',
                    maxlength: 500
                };
            }
        },
        // 模板id
        templateId: {
            type: String,
            default : function () {
                return '';
            }
        },
        // 内容id
        briefingDetailId: {
            type: String,
            default : function () {
                return '';
            }
        }
    },
    mounted() {},
    data() {
        return {
            //templateId: '',
            uploadUrl: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
            file: null,
            fileName: '',
            imgUrl: ''
        };
    },
    methods: {
        // 供子级调用(点击子级的按钮更新数据)-更新子数据
        updateSignTempData(tempData) {
            this.$emit('updateSignTempData', tempData);
            console.log('updateSignTempData:');
            console.log(tempData);
        },
        // 供父级调用(点击父级的保存按钮 tempData.isSaveInChild 为true时调用)-调用子级的保存函数
        saveSignTempForChild() {
            console.log('saveSignTempForChild:');
            console.log(this.tempData);
        },

        // 上传-
        uploadSuccess () {
            console.log(111);
        },
        // 选择文件
        uploadFile(e) {
            if (e.target.files[0]) {
                this.fileEvent = e;
                this.file = e.target.files[0];
                this.fileName = this.file.name;
                this.importDataTemplate();
            }
        },
        async importDataTemplate() {
            let formData = new FormData(),
              res;
            //debugger
            formData.append('file', this.file, this.fileName);
//          formData.append('tplType ', this.tplType);
            formData.append('templateId ', this.templateId);
            this.loading = true;

            //return;
            res = await C.request.http({
              url: C.Api('uploadImage'),
              data: formData,
              method: 'POST',
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            });
            if (res.flag === C.Flag.SUCCESS) {
              let fileId = res.data || '';
              let tempData = JSON.parse(JSON.stringify(this.tempData));
              tempData.fileId = fileId;
              this.updateSignTempData(tempData);
            }
        },
    }  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.temp-upload-load-mod, .temp-upload-load-mod .sign-mod-edit, .temp-upload-load-mod .sign-mod-prev, .temp-upload-load-mod .temp-upload-img{ width: 100%; height: 100%;}
.temp-upload-load-mod .ivu-upload{ height: 100%; }

.upload-img-mod{ min-height: 20px; }
.upload-img-mod{ position: relative; width: 100%; height: 100%; cursor: pointer;}
.upload-img-mod .temp-upload-img{ position: absolute; width: 100%; height: 100%; z-index: 3; pointer-events: none;}
.upload-img-mod .upload-file{ position: absolute; z-index: 2; width: 100%; height: 100%; cursor: pointer;}
</style>
